<template>
	<view class="loginContainer">
		<!-- <button type="default" @click="loginHandler()">登录</button> -->
		<!-- 如果用手机号登录，获取手机号码相关信息 -->
		<!-- <button type="primary" open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="getPhoneNumber">手机号一键登录</button> -->
		<!-- 如果用微信登录，获取微信相关用户信息 -->
		<!-- <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">获取用户信息</button> -->
		<view v-if="isShow">
		<image src="../../static/images/loginIcon.png" class="loginIcon"></image>
		<!-- <view class="selectSchoolBox flex">
			<input placeholder="请选择学校" class="inputBox" />
			<image src="../../static/images/moreIcon3.png" class="moreIcon3"></image>
		</view> -->
		<view class="selectSchoolBox flex" v-show="!isShowPhone">
			<picker mode="selector" :range="schoolList" @change="changeSelect" style="width: 100%;position: relative;">
				<view class="inputBox">{{schoolList[schoolIdx]}}</view>
				<image src="../../static/images/moreIcon3.png" @click="changeSelect" class="moreIcon3"></image>
			</picker>
		</view>
		<button class="loginBtnBox flex" v-if="isShowPhone" open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="getPhoneNumberHandler">
			<image src="../../static/images/wxIcon.png" class="wxIcon"></image>
			<view>微信一键登录</view>
		</button>
		<button class="loginBtnBox flex" v-else @click="getUserInfo">
			<image src="../../static/images/wxIcon.png" class="wxIcon"></image>
			<view>授权登录</view>
		</button>
		<!-- <button class="loginBtnBox flex" v-else open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">
			<image src="../../static/images/wxIcon.png" class="wxIcon"></image>
			<view>授权登录</view>
		</button> -->
		</view>
	<!-- 	<view v-else>
			<view class="selectSchoolBox flex" > -->
				<!-- <picker mode="selector" :range="schoolList" @change="changeSelect" style="width: 100%;position: relative;">
					<view class="inputBox">{{schoolList[schoolIdx]}}</view>
					<image src="../../static/images/moreIcon3.png" @click="changeSelect" class="moreIcon3"></image>
				</picker> -->
				<!-- 操作流程说明：请进入【湖南师范大学图书馆】微信公众号-微服务【菜单】-【教室朗读亭服务】-点击【预约】进入系统后，再扫描“邀请码”，谢谢！ -->
			<!-- /view>
		</view> -->
		<block  v-else>
			<view class="uni-form-item uni-column flex inputBox2" style="margin-top: 10px;">
				<view class="title">账号：</view>
				<input class="uni-input inputVal" v-model="userNum"  placeholder="请输入账号" />
			</view>
			<view class="uni-form-item uni-column flex inputBox2">
				<view class="title">密码：</view>
				<input class="uni-input inputVal" v-model="pwd" type="password" placeholder="请输入密码" />
			</view>
			<view class="uni-form-item uni-column flex inputBox2">
				<input class="uni-input inputVal" type="text" v-model="imgCode" placeholder="请输入图形验证码" />
				<image :src="messageUrl" class="imgCodeUrl" @click="changeImgCode()"></image>
			</view>
			<button class="loginBtnBox" @click="h5Login()">登录</button>
		</block>
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				isShow:false,
				userInfo: {},
				isShowPhone: false,
				schoolDataList: [],
				schoolList: ['请选择学校'],
				schoolIdx: 0,
				randomt: '',//时间戳随机数，获取图片用
				messageUrl: '',//图形验证码图片地址
				imgCode: '',//输入的图形验证码
				userNum:'',
				pwd:'',
			}
		},
		onLoad() {
			this.searchSchoolList();
			// this.getSettingMes();
			this.changeImgCode();
		},
		methods: {
			searchSchoolList() {
				let _this = this;
				_this.$utils.requestFun('/base/base/api/queryChannelList?route=base', {}, 'GET').then(res => {
					console.log(res)
					let dataList = [];
					if(res.data.data && res.data.data.length > 0) {
						for(let i = 0;i<res.data.data.length;i++) {
							dataList.push(res.data.data[i].channelName);
						}
						_this.schoolDataList = res.data.data;
						_this.schoolList = _this.schoolList.concat(dataList);
					}
				});
			},
			//选择下拉框
			changeSelect(e) {
				console.log(e)
				this.schoolIdx = e.target.value;
			},
			//获取用户信息
			getUserInfo(){
				if(this.schoolIdx == 0) {
					uni.showToast({
						title: "请选择学校！",
						icon: 'none'
					})
					return false;
				}
				let _this = this;
				getApp().globalData.channelId = _this.schoolDataList[_this.schoolIdx-1].channelId;
				uni.setStorage({
					key: 'channelId',
					data: _this.schoolDataList[_this.schoolIdx-1].channelId
				});
				uni.getUserProfile({
					desc:'Wexin',     // 这个参数是必须的
					success:res=>{
						_this.userInfo = res.userInfo;
						getApp().globalData.userInfo = res.userInfo;
						uni.setStorage({
							key: 'userInfo',
							data: res.userInfo
						});
						uni.login({
							success (res1) {
								console.log('code',res1);
								//发起网络请求
								uni.request({
									url: getApp().globalData.serverUrl+'/auth/auth/api/smallLogin?route=auth',
									// 请求参数code
									data: {
										channelId: getApp().globalData.channelId,
										jscode: res1.code,
										appId: getApp().globalData.appid
									},
									method: 'GET',
									success(res2){
										// 请求成功后获取openid和session_key
										console.log(res2)
										getApp().globalData.token = res2.data.data.token;
										uni.setStorage({
											key: 'token',
											data: res2.data.data.token
										});
										if(res2.data.data.mobilePhone) {
											uni.setStorage({
												key: 'userPhone',
												data: res2.data.data.mobilePhone
											});
											getApp().globalData.userPhone = res2.data.data.mobilePhone;
											if(getApp().globalData.orderNum && getApp().globalData.orderNum != '') {
												uni.redirectTo({
												    url: '/pages/classroom/classroom?orderId='+getApp().globalData.orderNum 
												});
											}else {
												uni.switchTab({
												    url: '/pages/index/index'
												});
											}
										}else {
											_this.isShowPhone = true;
											_this.userInfo = res2.data.data;
											getApp().globalData.userInfo = res2.data.data;
											uni.setStorage({
												key: 'userInfo',
												data: res2.data.data
											});
										}
									}
								})
							}
						});
					},
					fail:err=>{
						console.log(err)
					}
				})
			},
			// 查看已授权选项
			getSettingMes() {
				let _this = this;
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userInfo']) {
							// 用户信息已授权，获取用户信息
							uni.getUserInfo({
								success(res) {
									console.log(111,res);
								},
								fail() {
									console.log("获取用户信息失败")
								}
							})
						} else if (!res.authSetting['scope.userInfo']) {
							console.log("需要点击按钮手动授权")
						}
					},
					fail() {
						console.log("获取已授权选项失败")
					}
				})
			},			
			// 手机登录时获取手机号码相关信息的函数
			getPhoneNumberHandler(e) {
				console.log(e);
				let _this = this;
				console.log(_this.userInfo)
				uni.request({
					// 请求路径
					url: getApp().globalData.serverUrl+'/auth/auth/api/yyLoginAccredit?route=auth',
					// 请求参数code
					data: {
						channelId: getApp().globalData.channelId,
						appId: getApp().globalData.appid,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						openID: _this.userInfo.openId,
						unionId: _this.userInfo.unionId,
						session_key: _this.userInfo.session_key,
						headPortrait: _this.userInfo.avatarUrl,
						nickName: _this.userInfo.nickName
					},
					method: 'GET',
					success(res){
						// 请求成功后获取openid和session_key
						console.log(res)
						getApp().globalData.token = res.data.data.token;
						uni.setStorage({
							key: 'token',
							data: res.data.data.token
						});
						uni.setStorage({
							key: 'userPhone',
							data: res.data.data.mobilePhone
						});
						getApp().globalData.userPhone = res.data.data.mobilePhone;
						if(getApp().globalData.orderNum && getApp().globalData.orderNum != '') {
							uni.redirectTo({
								url: '/pages/classroom/classroom?orderId='+getApp().globalData.orderNum 
							});
						}else {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					}
				})
			},
			changeImgCode() {
				this.randomt = new Date().getTime();//时间戳随机数
				this.messageUrl = 'https://t.acoer.cn/auth/auth/api/authImage?route=auth&t='+this.randomt;//图形验证码图片
			},
			verifityForm11() {
				getApp().globalData.channelId = 'BJGYDX'
				if(this.userNum == '') {
					uni.showToast({
						title: "请输入账号！",
						icon: 'none'
					});
					return false;
				}else if(this.pwd == '') {
					uni.showToast({
						title: "请输入密码！",
						icon: 'none'
					});
					return false;
				}else if(this.imgCode == '') {
					uni.showToast({
						title: "请输入图形验证码！",
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			h5Login() {
				let _this = this;
				if(this.verifityForm11()) {
					uni.request({
						url: getApp().globalData.serverUrl+'/auth/auth/api/memberLoginApi?route=auth',
						data: {
							channelId: getApp().globalData.channelId,
							appId: getApp().globalData.appid,
							mobilePhone: _this.userNum,
							imgCode: _this.imgCode,
							password: _this.pwd,
							t: _this.randomt,
							loginType: 1
						},
						method: 'GET',
						success(res){
							if(res.data.code == "10000") {
								getApp().globalData.token = res.data.data.token;
								uni.setStorage({
									key: 'token',
									data: res.data.data.token
								});
								uni.setStorage({
									key: 'userPhone',
									data: res.data.data.mobilePhone
								});
								getApp().globalData.userPhone = res.data.data.mobilePhone;
								
								// #ifdef MP-WEIXIN
									uni.reLaunch({
										url: '/pages/index/index'
									});	
								// #endif
									
								// #ifdef H5
								// window.location.href = 'http://room.lib.hunnu.edu.cn/guoshiH5/index.html#/pages/index/index';
								uni.reLaunch({
									url: '/pages/index/index'
								});	
								// #endif	
							}else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								_this.changeImgCode()
							}
							
							/* if(getApp().globalData.orderNum && getApp().globalData.orderNum != '') {
								uni.redirectTo({
									url: '/pages/classroom/classroom?orderId='+getApp().globalData.orderNum 
								});
							}else {
								uni.switchTab({
									url: '/pages/index/index'
								});
							} */
						}
					})
				}
			}
		}
	}
</script>

<style>
	.loginContainer {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		overflow: hidden;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.loginIcon {
		width: 369rpx;
		height: 369rpx;
		display: block;
		margin: 0 auto;
		margin-top: 31rpx;
	}
	.selectSchoolBox {
		width: 88%;
		height: 98rpx;
		line-height: 98rpx;
		margin: 80rpx 45rpx 45rpx 45rpx;
		background: #F6F6F6;
		border-radius: 49rpx;
	}
	.inputBox {
		margin-left: 46rpx;
	}
	.moreIcon3 {
		width: 66rpx;
		height: 16rpx;
		position: absolute;
		right: 20px;
		top: 43%;
	}
	.loginBtnBox {
		width: 88%;
		height: 98rpx;
		line-height: 98rpx;
		margin: 80rpx 45rpx 45rpx 45rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 49rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.wxIcon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 13rpx;
		margin-top: 36rpx;
		margin-left: 34%;
	}
	.inputBox2 {
		width: 85%;
		height: 30px;
		line-height: 30px;
		border: 1px solid #efefef;
		border-radius: 10px;
		margin: 0 auto;
		padding: 10px 0 10px 10px;
		margin-bottom: 10px;
	}
	.inputVal {
		margin-top: 4px;
		width: 85%;
	}
	.imgCodeUrl {
		width: 242px;
		height: 30px;
		margin-right: 14px;
	}
</style>
